"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const regions = ["全部", "内地", "港台", "欧美", "韩国", "日本"]
const versions = ["全部", "MV", "现场", "翻唱", "舞蹈", "影视", "综艺", "儿歌"]

interface MVFiltersProps {
  selectedRegion: string
  selectedVersion: string
  onRegionChange: (region: string) => void
  onVersionChange: (version: string) => void
}

export function MVFilters({ selectedRegion, selectedVersion, onRegionChange, onVersionChange }: MVFiltersProps) {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-4">
        <span className="text-sm font-medium text-muted-foreground w-20">区域</span>
        <div className="flex flex-wrap gap-2">
          {regions.map((region) => (
            <Button
              key={region}
              variant="ghost"
              size="sm"
              className={cn(
                "h-8 rounded-full",
                selectedRegion === region && "bg-primary text-primary-foreground hover:bg-primary/90",
              )}
              onClick={() => onRegionChange(region)}
            >
              {region}
            </Button>
          ))}
        </div>
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm font-medium text-muted-foreground w-20">版本</span>
        <div className="flex flex-wrap gap-2">
          {versions.map((version) => (
            <Button
              key={version}
              variant="ghost"
              size="sm"
              className={cn(
                "h-8 rounded-full",
                selectedVersion === version && "bg-primary text-primary-foreground hover:bg-primary/90",
              )}
              onClick={() => onVersionChange(version)}
            >
              {version}
            </Button>
          ))}
        </div>
      </div>
    </div>
  )
}

